<template>
    <div v-show='showIf' class='bumen-wrap'>
        <i @click.stop='$emit("update:bumenVisible", false)' class="el-dialog__close el-icon el-icon-close"></i>
        <section class="searchdxa">
          <el-input
            :on-icon-click='getTableData'
            @keyup.enter.native='getTableData'
            style="width:85%" 
            icon="search"
            v-model='serachVal'
          ></el-input>
          <h4>默认结果只显示前300</h4>
        </section>

        <section class="table">
          <el-table
          :data="tableData"
           @row-click='handleRowClick'
           max-height='350'
           class='employRoster-dialog-table'
           >

            <el-table-column
              v-for='(k,i) in tableOption'
              :prop='k.value'
              :label='k.label'
              :width='k.width'
              class-name='column'
              >
            </el-table-column>
            
          </el-table>

        </section>
    </div>
</template>

<script>
import Vue from 'vue'
import { Dialog } from 'element-ui'
Vue.use(Dialog)

export default {
  data () {
    return {
      showIf: false,
      tableOption: [
        {
          label: '部门编号',
          value: 'deptid'
        },
        {
          label: '部门',
          value: 'descr'
        },
        {
          label: '部门全称',
          value: 'descrshort'
        },
      ],
      tableData: [],
      serachVal: ''
    }
  },
  props: {
    bumenVisible: {
      type: Boolean,
      default: false
    },
    setid: {
      type: String,
      default: ''
    }
  },

  watch: {
    bumenVisible (newValue, oldValue) {
      this.showIf = newValue
      newValue === true && (this.handleOpen())
    }
  },



  methods: {
    handleOpen () {
      this.serachVal = ''
      this.getTableData()
    },

    getTableData () {

      const params = {
        setid: this.setid,
        pageNum: 1,
        pageSize: 300,
        search: this.serachVal
      }


      this.Axios.Post('/department/getDeptListBySetidNoAuth', params)
        .then((res) => {
          const data = res.data.datas
          this.tableData = data
        })



    },

    handleClose () {
      this.$emit('update:bumenVisible', false)
    },

    handleRowClick (row) {

      const { deptid, descr } = row, value = `${descr}(${deptid})`

      this.$emit('getBumenData', value)

      this.handleClose()
    }
  },




}
</script>


<style lang='less' scoped>
.bumen-wrap {
  width: 680px;
  position: relative;
  left: 50%;
  top: 15px;
  padding: 15px 15px 15px 15px;
  border-radius: 4px;
  transform: translateX(-60%);
  background-color: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.156863),
    0 1px 6px rgba(0, 0, 0, 0.227451);
  margin-bottom: 5px;
  .fenye {
    margin: 15px 0 0 -10px;
  }

  .el-dialog__close {
    position: absolute;
    cursor: pointer;
    right: 17px;
    top: 15px;
  }
}
</style>

<style lang='less'>
.classID {
  text-align: center;
  color: #56aadd;
  margin-top: -12px;
  margin-bottom: 12px;
  font-size: 15px;
}
.employRoster-dialog-table {
  .el-table__body-wrapper {
    .column {
      cursor: pointer !important;
    }

    .el-table__row:hover {
      color: #20a0ff !important;
    }
  }
}

.searchdxa {
  text-align: center;
  h4 {
    padding: 15px 0;
    color: rgb(195, 200, 200);
    font-size: 12px;
    font-weight: normal;
  }
}
</style>